<template>
  <div>
    <head-text titleText="文件上传"></head-text>
    <div class="list-content">
      <el-form :inline="true" :model="dataForm">
        <!-- <el-form-item>
          <el-button type="primary" @click="configHandle()" size="mini" disabled
            >云存储配置</el-button
          >
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="uploadHandle()" size="mini" plain
            >上传文件</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="delSelection()" size="mini" plain
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
      <div class="table-title">
        <span></span>
        <h5>文件列表</h5>
      </div>
      <el-table
        :data="dataList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        v-if="hackReset"
        size="mini"
      >
        <el-table-column
          type="selection"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column label="图片" align="center" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.url" class="img-size" alt="" v-image-preview />
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="URL地址"
          align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          sortable
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              plain
              style="margin: 5px"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <page
        :nowPage="nowPage"
        :total="total"
        :limit="limit"
        @pageChange="onPageChange"
        @sizeChange="onSizeChange"
      />

      <!-- 弹窗, 云存储配置 -->
      <config v-if="configVisible" ref="config"></config>
      <!-- 弹窗, 上传文件 -->
      <upload v-if="uploadVisible" ref="upload" @refresh="getList"></upload>
    </div>
  </div>
</template>

<script>
import page from "@c/page";
import headText from "@c/headText";
import Config from "./oss-config";
import Upload from "./oss-upload";
import { getOssListApi, deleteOssInfoApi } from "@s/api";
export default {
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      hackReset: true,
      dataList: [],
      dataForm: {},
      configVisible: false,
      uploadVisible: false,
      multipleSelection: []
    };
  },
  components: {
    page,
    Config,
    Upload,
    headText
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 分页
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    // 初始数据列表
    getList() {
      let json = {
        page: this.nowPage,
        limit: this.limit
      };
      getOssListApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.dataList = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    },
    // 删除列表信息
    del(id) {
      this.$confirm("此操作将删除该信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [];
        if (id instanceof Array) {
          json = id;
        } else {
          json.push(id);
        }
        deleteOssInfoApi(json).then(() => {
          this.getList();
          // 清空gouxuan
          this.multipleSelection = [];
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    },
    // 批量删除
    delSelection() {
      if (this.multipleSelection.length > 0) {
        var ids = [];
        this.multipleSelection.forEach(item => {
          ids.push(item.id);
        });
        this.del(ids);
      } else {
        this.$message({
          type: "warning",
          message: "必须选择至少一项！"
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 云存储配置
    configHandle() {
      this.configVisible = true;
      var _this = this;
      this.$nextTick(() => {
        _this.$refs.config.init();
      });
    },
    // 上传文件
    uploadHandle() {
      this.uploadVisible = true;
      var _this = this;
      this.$nextTick(() => {
        _this.$refs.upload.init();
      });
    }
  }
};
</script>
<style scoped>
.img-size {
  width: 100px;
  cursor: pointer;
}
</style>
